<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>仿站后台</title>
  <link rel="stylesheet" href="../css/home.css">  
</head>

<body>
  <div class="box">
    <div class="top">
      <h1>仿站后台管理</h1>
      <p>
        您好
        <span>admin6666</span>
        <button>退出注销</button>
      </p>
    </div>
    <div class="bottom">
      <div class="left">
        <ul>
          <li>
            <a href="#/home">管理首页</a>            
          </li>
          <li>
            <a href="#/users">用户管理</a>
            <ol>
              <li><a href="#/users/list">用户列表</a></li>
            </ol>
          </li>
          <li>
            <a href="#/carousel">轮播图管理</a>
            <ol>
              <li><a href="#/carousel/list">轮播图列表</a></li>
              <!-- <li><a href="#/second/second2Sub">添加轮播图</a></li> -->
            </ol>
          </li>
          <li>
            <a href="#/goods">商品管理</a>
            <ol>
              <li><a href="#/goods/list">商品列表</a></li>
              <li><a href="#/goods/add">商品添加</a></li>
            </ol>
          </li>
        </ul>
      </div>
      <div class="router-view">
        <!-- <div>first</div> -->
      </div>
    </div>
  </div>
  <script>
    // 获取页面的所有ul>li>a
    let aEles = document.querySelectorAll('ul>li>a');
    aEles.forEach(ele => {
      ele.onclick = function () {
        if (!ele.nextElementSibling) return;
        if (ele.nextElementSibling.clientHeight) {
          ele.nextElementSibling.style.height = '0px'
        } else {
          let n = ele.nextElementSibling.children.length;
          ele.nextElementSibling.style.height = n * 30 + 'px'
        }
      }
    })
  </script>
  <script src="../js/home.js" type="module"></script>
</body>

</html>